<template>
  <el-col  :span="12" class="grid-cell" @click.stop="selectWidget(widget)">
      <draggable 
        :list="widgetList"
        item-key="id" 
        group="dragGroup"
        ghost-class="ghost"
        handle=".drag-handler"
        filter=".forbid"
        dragClass="dragClass"
        chosen-class="chosenClass"
        animation="300"
       
        @start="onStart"
        @end="onEnd"
        @add="onAdd" 
        @update="onUpdate" 
        :move="onMove"
      >
    
        <template #item="{ element: widget, index }">
          <div class="transition-group-el">
            <template v-if="'container' === widget.category">
              <div></div>
            </template>
            <template v-else>
              <fieldWidget :data="widget"></fieldWidget>
            </template>
          </div>
        </template>
      </draggable>

      <div class="grid-col-action" v-if="false">
          <i title="选中父组件" 
          @click.stop="selectParentWidget(field)"><SvgIcon icon-class="el-back" /></i>
          <i  title="上移组件"  
          @click.stop="moveUpWidget(field)"><SvgIcon icon-class="el-move-up" /></i>
          <i  title="下移组件"
            @click.stop="moveDownWidget(field)"><SvgIcon icon-class="el-move-down" /></i>
          <i  title="复制组件"
          @click.stop="cloneContainer(widget)"><SvgIcon icon-class="el-clone" /></i>
          <i title="删除组件" @click.stop="removeFieldWidget">
            <SvgIcon icon-class="el-delete" />
          </i>
      </div>

      <div class="grid-col-handler" v-if="false">
        <i>表格</i>
      </div>
  </el-col>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import draggable from "vuedraggable"
  import SvgIcon from '@/designer/svgIcon'
  import fieldWidget from '../fieldWidget'
  import gridWidget from '../containerWidget/gridWidget.vue'

  const state = reactive({
      widgetList: []
    });

    const {
      widgetList
    }  = toRefs(state);
  const parentData = defineProps({
      data:{
          type: String,
          name: String
       }
  });

</script>

<style lang="scss" scoped>
   $--color-primary: #409EFF;
  .grid-cell {
    min-height: 38px !important;
    //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
    padding: 3px;
    outline: 1px dashed #336699;
    position: relative;

    .form-widget-list {
      min-height: 28px;
    }

    .grid-col-action{
      position: absolute;
      bottom: 0;
      right: -2px;
      height: 28px;
      line-height: 28px;
      background: $--color-primary;
      z-index: 999;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .grid-col-handler {
      position: absolute;
      top: -2px;
      left: -2px;
      height: 22px;
      line-height: 22px;
      background: $--color-primary;
      z-index: 9;

      i {
        font-size: 14px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: default;
      }
    }
  }

  .grid-col-action, .grid-col-handler {
    :deep(.svg-icon) {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }

</style>
